<!--
 * @description: 
 * @Date: 2022-10-05 13:34:41
 * @LastEditTime: 2022-11-07 17:39:06
-->
<template>
  <div class="indexBody" @contextmenu.prevent="menu($event, item)" v-if="indexShow">
    <div
      class="background"
      id="background"
      @contextmenu.prevent="menu($event, 'desktop')"
      :style="`background: url(${store.state.config.theme.backgroundImage}?x-image-process=image/format,jpg/quality,Q_75/sharpen,100/blur,r_1,s_1) no-repeat center/cover;transform: scale(1.2);filter: blur(${store.state.config.theme.blur}px)`"
    ></div>
    <div class="IndexPage">
      <div class="Pages">
        <div :style="{ marginTop: Top, transition: 'all .5s' }">
          <Time @change="hiddenList"></Time>
          <Search></Search>
        </div>
        <div class="mb-32">
          <Main v-if="listShow" />
        </div>
      </div>
    </div>
  </div>
  <Footer v-if="store.state.config.theme.tabbar && footerStatus" :reload="refresh" />
  <AppSide></AppSide>
  <Controller></Controller>
  <MouseMenu></MouseMenu>
  <DeskTopMouse></DeskTopMouse>
  <IconGroupBox></IconGroupBox>
</template>
<script setup name="Index">
import Footer from "./footer.vue";
import Time from "./time.vue";
import Main from "./main.vue";
import Search from "./search.vue";
import emitter from "@/util/emitter";
import cache from "../../util/cache";
import { ref, nextTick, onUnmounted, defineAsyncComponent } from "vue";
import { useStore } from "vuex";
import { setTitleColor } from "../../util/plugins";
const indexShow = ref(true);
const DeskTopMouse = defineAsyncComponent(() => import("@/components/deskTopMouse.vue"));
const Controller = defineAsyncComponent(() => import("@/components/controller.vue"));
const MouseMenu = defineAsyncComponent(() => import("@/components/mouseMenu.vue"));
const AppSide = defineAsyncComponent(() => import("@/components/appSide.vue"));
const IconGroupBox = defineAsyncComponent(() => import("./iconGroupBox.vue"));
const store = useStore();
const listShow = ref(cache.get("listShow", true));
const Top = ref(0);
const footerStatus = ref(true);
const hiddenList = () => {
  listShow.value = !listShow.value;
  cache.set("listShow", listShow.value);
  listshowFn();
};
const refreshMain = () => {
  listShow.value = false;
  nextTick(() => {
    listShow.value = true;
  });
};
emitter.on("RefreshLink", refreshMain);
onUnmounted(() => {
  emitter.off("RefreshLink", refreshMain);
});
const menu = (event, info) => {
  const { button, clientX, clientY } = event;
  if (button === 2) {
    emitter.emit("deskTopMouse", {
      left: clientX,
      top: clientY,
    });
  }
  event.stopPropagation();
};
const refresh = () => {
  footerStatus.value = false;
  nextTick((_) => {
    footerStatus.value = true;
  });
};
const listshowFn = () => {
  if (!listShow.value) {
    Top.value = "150px";
  } else {
    Top.value = "0px";
  }
};
const start = () => {
  store.commit("pullLink");
  store.commit("pullFoooter");
  store.commit("pullConfig");
};
start();
listshowFn();
const swipeDeskTop = (event) => {
  const { key, ctrlKey, shiftKey } = event;
  if (key == "ArrowRight" && ctrlKey && shiftKey) {
    document.querySelector(".IndexPage").style = "transform: translateX(-100%)";
  }
  if (key == "ArrowLeft" && ctrlKey && shiftKey) {
    document.querySelector(".IndexPage").style = "transform: translateX(0%)";
  }
};
const closeEdit = () => {
  if (store.state.editStatus) {
    store.state.editStatus = false;
  }
};
const refreshIndex = () => {
  indexShow.value = false;
  nextTick(() => {
    indexShow.value = true;
    start();
  });
};
emitter.on("reload", refreshIndex);
window.addEventListener("click", closeEdit);
window.addEventListener("keydown", swipeDeskTop);
onUnmounted(() => {
  emitter.off("reload", refreshIndex);
  window.removeEventListener("click", closeEdit);
  window.removeEventListener("keydown", swipeDeskTop);
});
setTitleColor(store.state.config.theme.backgroundImage);
</script>
<style lang="less">
.IndexPage {
  position: relative;
  z-index: 1;
  transition: all 0.5s;
}

.indexBody {
  position: absolute;
  top: 0px;
  min-height: 100vh;
  width: 100%;
}

.background {
  position: fixed;
  z-index: -1;
  height: 100vh;
  width: 100vw;
  top: 0px;
  left: 0px;
}

#background2 {
  position: fixed;
  z-index: 0;
  height: 100vh;
  width: 100vw;
  top: 0px;
  left: 0px;
}

@media (max-width: 480px) {
  .links-box {
    margin: 40px auto auto auto !important;
  }
}

.links-box {
  margin: 40px auto auto auto;
  min-height: 400px;
  user-select: none;
  display: flex;
  justify-content: center;

  .itxst {
    grid-auto-flow: dense;
    grid-template-rows: repeat(auto-fill, 83px);
  }
}
</style>
